<template>
  <div>
     <p align="left" style="color: black; font-size: 20px">合同信息查询</p>
      <el-form :inline="true" class="demo-form-inline" ref="chaDataRef">
        <el-form-item label="合同名称">
    <el-input v-model="pageInfo.searchItem.name"></el-input>
  </el-form-item>
   <el-form-item label="工程负责人">
    <el-input v-model="pageInfo.searchItem.fzname"></el-input>
  </el-form-item>
  <el-button type="primary" @click="getContract">查询</el-button>
      </el-form>
     <p align="left" style="color: black; font-size: 20px">合同信息显示</p>
      <el-popover placement="right" width="400" trigger="click">
      <el-select v-model="colOptions" multiple 
           collapse-tags style="margin-left: 20px;" placeholder="请选择">
  <el-option v-for="item in colSelect" :key="item" :label="item" :value="item">
  </el-option>
</el-select>
      <el-button slot="reference">设置显示列</el-button>
    </el-popover>
    <el-table :data="tableData" ref="tableDataRef" style="width: 100%">
      <el-table-column prop="contract_id" label="合同编号" width="180" v-if="colData[0].istrue">
      </el-table-column>
      <el-table-column
        prop="contract_textserial"
        label="合同文本编号"
        width="180"
        v-if="colData[1].istrue"
      >
      </el-table-column>
      <el-table-column prop="contract_contname" label="合同名称" v-if="colData[2].istrue">
      </el-table-column>
      <el-table-column prop="contract_area" label="建筑规模(㎡)" v-if="colData[3].istrue">
      </el-table-column>
      <el-table-column prop="contract_many" label="合同金额(万元)" v-if="colData[4].istrue">
      </el-table-column>
      <el-table-column prop="contract_sjmany" label="合同实际金额(万元)" v-if="colData[5].istrue">
      </el-table-column>
      <el-table-column prop="contract_time" label="签约日期" v-if="colData[6].istrue"> </el-table-column>
      <el-table-column prop="contract_projectname" label="工程负责人" v-if="colData[7].istrue">
      </el-table-column>
      <el-table-column prop="contract_projecttell" label="工程负责人电话" v-if="colData[8].istrue">
      </el-table-column>
      <el-table-column prop="contract_first_people" label="甲方负责人" v-if="colData[9].istrue">
      </el-table-column>
      <el-table-column prop="contract_first_tell" label="甲方负责人电话" v-if="colData[10].istrue">
      </el-table-column>
      <el-table-column prop="contract_adder" label="工程地点" v-if="colData[11].istrue">
      </el-table-column>
      <el-table-column prop="img_sum" label="图纸套数" v-if="colData[12].istrue"> </el-table-column>
      <el-table-column prop="img_sjsum" label="图纸已出套数" v-if="colData[13].istrue"> </el-table-column>
      <el-table-column prop="chai_sum" label="差旅次数" v-if="colData[14].istrue"> </el-table-column>
      <el-table-column prop="chai_sjsum" label="已出差旅次数" v-if="colData[15].istrue">
      </el-table-column>
      <el-table-column prop="contract_reamk" label="合同备注" v-if="colData[16].istrue">
      </el-table-column>
      <el-table-column  label="操作" v-if="colData[17].istrue">
        <template slot-scope="scope">
          <el-button @click="chaa(scope.row.contract_id)">查看</el-button>
          <el-button @click="bian(scope.row.contract_id)">编辑</el-button>
        </template>
        
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageIndex"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
    >
    </el-pagination>
  </div>
</template>
<script>
var lujing1 = "http://localhost:55117/api/ContractControllers/";
export default {
  data() {
    return {
      tableData: [],
      totalCount: null,
      pageInfo: {
        pageIndex: 1,
        pageSize: 3,
        searchItem: {
          name:null,
          fzname:null,
        },
      },
       colData: [
        { title: "合同编号", istrue: true },
        { title: "合同文本编号", istrue: true },
        { title: "合同名称", istrue: true },
        { title: "建筑规模", istrue: true },
        { title: "合同金额", istrue: true },
        { title: "合同实际金额", istrue: true },
        { title: "签约日期", istrue: true },
        { title: "工程负责人", istrue: true },
        { title: "工程负责人电话", istrue: false },
        { title: "甲方负责人", istrue: false },
        { title: "甲方负责人电话", istrue: false },
        { title: "工程地点", istrue: false },
        { title: "图纸套数", istrue: false },
        { title: "已出图纸套数", istrue: false },
        { title: "差旅次数", istrue: false },
        { title: "已出差旅次数", istrue: false },
        { title: "合同备注", istrue: false },
        { title: "操作", istrue: true },
        
      ],
      colOptions: [
        "合同编号",
        "合同文本编号",
        "合同名称",
        "建筑规模",
        "合同金额",
        "合同实际金额",
        "签约日期",
        "工程负责人",  
        "操作",  
      ], //默认全选
      colSelect: [
        "合同编号",
        "合同文本编号",
        "合同名称",
        "建筑规模",
        "合同金额",
        "合同实际金额",
        "签约日期",
        "工程负责人",
        "工程负责人电话",
        "甲方负责人",
         "甲方负责人电话",
         "工程地点",
        "图纸套数",
         "已出图纸套数",
        "差旅次数",
         "已出差旅次数",
         "合同备注",
         "操作"
        
      ],
    };
  },
  created() {
    this.getContract();
  },
   watch: {
    colOptions(valArr) {
      console.log(this.$refs.tableDataRef);
      var arr = this.colSelect.filter((i) => valArr.indexOf(i) < 0); // 未选中
      this.colData.filter((i) => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    }, 
  },
  methods: {
    getContract() {
      this.$myaxios
        .post(lujing1 + "GetContract", this.pageInfo)
        .then((obj) => {
          this.tableData = obj.data;
          this.tableData = obj.data.data;
          this.totalCount = obj.data.total;
        });
    },
    handleSizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.getContract();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageIndex = val;
      this.getContract();
    },
    chaa(id){
      sessionStorage.setItem("cid", id);
      this.$router.push("/sys/COFan");
    },
    bian(id){
      sessionStorage.setItem("cid", id);
      this.$router.push("/sys/COUpdate");
    }
  },
};
</script>